<template>
  <div class="config-platform">
    <!-- 画布基本配置 -->
    <div class="block canvas-basic f-r-b-c">
      <div class="f-r-s-c flex4">
        宽 <input type="number" step="10" placeholder="画布宽度" v-model="width" />
        高 <input type="number" step="10" placeholder="画布高度" v-model="height" />
        radius <input type="number" step="10" placeholder="radius" v-model="radius" />
        dpr <input type="number" step="10" placeholder="dpr" v-model="dpr" />
      </div>
      <div class="flex1" style="font-size: 12px;color:coral;text-align:right;">这里修改后需刷新页面</div>
      <!-- <div class="flex1 f-r-e-c">辅助线：<input type="checkbox" class="checkbox" v-model="helpLine"></div> -->
    </div>

    <!-- 形状工具栏 -->
    <div class="block shape-list">
      <div v-for="(item, type) in shapeTypeList" :key="type"
        :class="['shape-item', type == selType && !isEdit ? 'active' : '']" @click="chooseConfig(type, item)">
        <img class="icon" :src="item.icon" :alt="item.name" />
        <span>#{{ type }}</span>
        <span>{{ item.name }}</span>
      </div>
    </div>

    <!-- 所选形状配置表单及配置列表 -->
    <div class="config-area">
      <div class="block form">
        <div class="form-item" v-for="(item, key) in selConfig" :key="key">
          <label :for="key">{{ key }}</label>
          <FormTypeItem :type="key" v-model:formValue="selConfig[key]" />
        </div>
        <div class="f-c-c-c" style="margin-top: 10px">
          <button :disabled="isEdit" class="btn" @click="pushConfig">
            追加配置
          </button>
          <p v-if="isEdit" class="edit-tip">属性修改会自动同步</p>
          <p v-else class="edit-tip">点击“追加配置”，形状数据即添加到右侧</p>
        </div>
      </div>

      <ul class="block user-config-list">
        <ol :class="['f-r-b-c', index === editIndex ? 'on-edit' : '']" v-for="(dc, index) in drawConfig" :key="index"
          @click="editConfig(index)">
          <div class="f-r-s-c">
            <img class="icon" :src="shapeTypeList[dc.type].icon" />
            <span>#{{ index + 1 }}.{{ dc?.options?.des || dc.type }}</span>
          </div>
          <span v-if="index == 0" @click.stop="swipItem(index, +1)" class="del-btn">⬇</span>
          <span v-else-if="index == drawConfig.length - 1" @click.stop="swipItem(index, -1)" class="del-btn">⬆</span>
          <span v-else>
            <span @click.stop="swipItem(index, +1)" class="del-btn">⬇</span>
            <span @click.stop="swipItem(index, -1)" class="del-btn">⬆</span>
          </span>
          <span @click.stop="delConfig(index)" class="del-btn">❌</span>
        </ol>
        <div class="f-c-c-s list-btn">
          <div class="f-r-a-c" style="border: solid 1px #ccc; padding: 10px 5px;border-radius: 5px;font-size:13px;">
            模版：
            <button class="btn" @click="loadDrawTemplate(FTY_DIGITAL_CARD_TEMPLATE_DATA)">小鸭卡</button>
            <button class="btn" @click="loadDrawTemplate(FTY_SPORT_POSTER_TEMPLATE_DATA)">运动海报</button>
          </div>

          <div class="f-r-c-c" style="margin-top: 20px;">
            <button class="btn" @click="saveConfig">导出配置</button>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { inject, ref, watch, unref, computed } from "vue";
import FormTypeItem from "./ConfigFormItem.vue";
import { isEqualObject } from "../../utils/util";
import { FTY_DIGITAL_CARD_TEMPLATE_DATA, FTY_SPORT_POSTER_TEMPLATE_DATA } from '../const'

import bgImg from "../assets/posterbg.png";
import avatarImg from "../assets/avatar.jpeg";
import lineIcon from "../assets/shape_icon/line.svg";
import textIcon from "../assets/shape_icon/text.svg";
import centerTextIcon from "../assets/shape_icon/centerText.svg";
import longTextIcon from "../assets/shape_icon/longText.svg";
import imageIcon from "../assets/shape_icon/image.svg";
import rectIcon from "../assets/shape_icon/rect.svg";
import avatarIcon from "../assets/shape_icon/avatar.svg";

let { receivedCoods } = defineProps(["receivedCoods"]);
let width = inject("width");
let height = inject("height");
let dpr = inject("dpr");
let radius = inject("radius");
let helpLine = inject("helpLine");
let selType = ref(""); //当前选中类型
let selConfig = ref(""); //当前选中类型对应的配置项
let isEdit = ref(""); //是否是编辑某个形状
let editIndex = ref("");

let drawConfig = inject("drawConfig");
let addDrawConfig = inject("addDrawConfig");
let loadDrawConfigs = inject("loadDrawConfigs");
let exportConfig = inject("exportConfig");

let shapeTypeList = {
  text: {
    name: "文本",
    icon: textIcon,
    options: {
      des: "",
      text: "",
      x: 0,
      y: 0,
      color: "#ffffff",
      fontSize: 16,
      font: "黑体",
      isThroughLine: false,
      isCenter: false,
      width: 100,
    },
  },
  centerText: {
    name: "居中文本",
    icon: centerTextIcon,
    options: {
      des: "",
      text: "",
      x: 0,
      y: 0,
      width: 100,
      color: "#ffffff",
      fontSize: 16,
      font: "黑体",
      isThroughLine: false,
    },
  },
  longText: {
    name: "段落",
    icon: longTextIcon,
    options: {
      des: "",
      text: "",
      x: 0,
      y: 0,
      color: "#ffffff",
      fontSize: 30,
      font: "黑体",
      lineHeight: 40,
      lineWidth: 200,
      maxLine: 3,
    },
  },
  image: {
    name: "插图",
    icon: imageIcon,
    options: {
      des: "",
      url: bgImg,
      x: 0,
      y: 0,
      width: 30,
      height: 30,
    },
  },
  avatar: {
    name: "头像",
    icon: avatarIcon,
    options: {
      des: "",
      url: avatarImg,
      x: 100,
      y: 100,
      r: 50,
      padding: 0,
      borderWidth: 2,
      borderColor: "#ffffff",
      isRound: true,
    },
  },
  line: {
    name: "线条",
    icon: lineIcon,
    options: {
      des: "",
      sx: 0,
      sy: 0,
      ex: 100,
      ey: 100,
      width: 2,
      color: "#000000",
      isClosure: false,
    },
  },
  rect: {
    name: "方形",
    icon: rectIcon,
    options: {
      des: "",
      x: 0,
      y: 0,
      width: 30,
      height: 30,
      color: "#ffffff",
    },
  },
}; //可绘制图形的类型列表

// watch(selType, (val, preVal) => {
//   selConfig.value = { ...shapeTypeList[val].options };
// });

watch(() => receivedCoods, (newV) => {
  console.log('newV', newV)
  // 如果在编辑模式，则自动更新选中项的x、y属性
  if (isEdit.value) {
    console.log('自动更新编辑项的坐标');
    const { x, y } = newV;
    if (x) {
      selConfig.value.x = x;
    }
    if (y) {
      selConfig.value.y = y;
    }
    saveConfig();
  }
})

function chooseConfig(type, item) {
  editIndex.value = '';
  selType.value = type;
  selConfig.value = { ...item.options };
  updateIsEdit(false);
}

function pushConfig() {
  if (selType.value) {
    addDrawConfig({
      type: selType.value,
      options: { ...selConfig.value, id: +new Date() },
    });
    saveConfig();
  } else {
    alert("未选择配置");
  }
}

function editConfig(index) {
  if (index == editIndex.value && isEdit.value) {
    updateIsEdit(false);
    selType.value = '';
    selConfig.value = '';
    editIndex.value = '';
    return;
  }

  const { type, options } = drawConfig.value[index];
  selType.value = type;
  selConfig.value = options; //这里不解构，可以做编辑响应式
  updateIsEdit(true);
  editIndex.value = index;
}

function updateIsEdit(val) {
  isEdit.value = val;
}

let isSameConf = (conf) => {
  return isEdit.value && isEqualObject(conf, selConfig.value);
};

function swipItem(index, direction) {
  let temp = drawConfig.value[index];
  drawConfig.value.splice(index, 1);
  drawConfig.value.splice(index + direction, 0, temp);
  loadDrawConfigs(drawConfig.value);
  exportConfig();
}

function delConfig(index) {
  if (confirm("确认删除该图形吗？")) {
    let delTarget = drawConfig.value[index];
    drawConfig.value.splice(index, 1);

    if (isSameConf(delTarget.options)) {
      selType.value = "";
      selConfig.value = {};
    }
    exportConfig();
  }
}

function loadDrawTemplate(data) {
  loadDrawConfigs(data);
}

function saveConfig() {
  exportConfig();
}
</script>
<style lang="less" scoped>
.config-platform {
  text-align: left;
  box-sizing: border-box;
  padding: 0 10px;

  .block {
    box-sizing: border-box;
    padding: 5px;
    margin: 10px 0;
    border: solid 1px #e4e4ea;
    border-radius: 8px;
  }

  .canvas-basic {
    flex-wrap: wrap;

    input {
      text-align: center;
      width: 50px;
      margin: 0 8px 0 5px;
    }

    .checkbox {
      width: 20px;
    }
  }

  .shape-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .shape-item {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      border: solid 2px transparent;
      transition: all 0.3s;

      .icon {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
      }

      span {
        margin-top: 2px;
        font-size: 13px;
        color: #999;
      }
    }

    .active {
      border-bottom-color: coral;
    }
  }

  .config-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;

    .user-config-list {
      flex: 1;
      margin-left: 10px;
      max-height: 800px;
      overflow-y: auto;
      position: relative;

      ol {
        padding: 5px;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          background-color: coral;
          color: #fff;
          border-radius: 8px;
        }

        .icon {
          margin-right: 4px;
          width: 20px;
          height: 20px;
        }

        span {
          font-size: 13px;
        }
      }

      .del-btn {
        font-size: 13px;
        margin: 0 5px;
      }

      .list-btn {
        margin-top: 20px;
        margin-bottom: 10px;
      }

      .on-edit {
        border-left: 2px coral solid;
      }
    }

    .form {
      border: solid 1px #e4e4ea;
      flex: 1;

      .form-item {
        margin-bottom: 20px;

        label {
          font-size: 16px;
          color: #666;
          border-left: 2px solid coral;
          padding-left: 5px;
        }
      }

      .edit-tip {
        font-size: 13px;
        color: #999;
        margin: 5px 0;
      }
    }
  }
}
</style>